<template>
  <div class="out-warehouse-receipt-details">
    <a-spin :spinning="loading">
      <a-form :model="formState" autocomplete="off">
        <!-- 基础信息 -->
        <BaseInfo :pass-data="formState" />

        <div class="driver-info" v-if="type === 2">
          <div class="title">
            <div class="title-Inner-div">
              <span>司机信息</span>
              <a-button type="primary" @click="setDriverHandle">配置出仓司机</a-button>
            </div>
          </div>
          <div class="table-content">
            <a-row :gutter="8">
              <a-col v-for="(item, index) in driverFormItemColumn" :key="index" :span="8">
                <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                  {{ formState[item.name] }}
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>

        <div class="driver-info" v-if="type === 1 && activeKey !== '1'">
          <div class="title">
            <div class="title-Inner-div">
              <span>司机信息</span>
            </div>
          </div>
          <div class="table-content">
            <a-row :gutter="8">
              <a-col v-for="(item, index) in driverFormItemColumn" :key="index" :span="8">
                <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                  {{ formState[item.name] }}
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>

        <div class="box-info" v-if="type !== 2">
          <div class="title">
            <span>运单信息</span>
          </div>
          <div class="table-content">
            <vxe-table border show-overflow="title" height="280" :data="formState.shipmentList" :scroll-y="{ enabled: true, gt: 30 }">
              <vxe-column type="seq" width="50"></vxe-column>
              <vxe-column field="waybillNum" title="运单号" width="140"></vxe-column>
              <vxe-column field="customerName" title="客户简称" width="130"></vxe-column>
              <vxe-column field="channelName" title="渠道" width="150"></vxe-column>
              <vxe-column field="agentChannelName" title="代理渠道" width="120"></vxe-column>
              <vxe-column field="depositTime" title="入仓时间" width="140">
                <template #default="{ row }">
                  {{ dayjs(+row.depositTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
              </vxe-column>
              <vxe-column field="itemNumber" title="件数"></vxe-column>
              <vxe-column field="actualWeight" title="实重"></vxe-column>
              <vxe-column field="squaresNumber" title="方数"></vxe-column>
              <vxe-column field="remark" title="客户备注"></vxe-column>
              <vxe-column field="innerRemark" title="内部备注"></vxe-column>
            </vxe-table>
          </div>
        </div>
      </a-form>
    </a-spin>

    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>

<script lang="ts">
import BaseInfo from "../baseInfo/index.vue";
import SetDirver from "../setDriver/index.vue";
import ModalHook from "@/hook/modalHook";
export default {
  components: {
    BaseInfo,
    SetDirver
  }
};
</script>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import { driverFormItemColumn } from "./data";
import operationHook from "./composables/operationHook";

import dayjs from "dayjs";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: StockManagement.ListRows;
    activeKey: string;
  }>(),
  {}
);
const { visible, passData, type, activeKey } = toRefs(props);

const { formState, loading, dialogOpts, init } = InitHook();

const { setDriverHandle } = operationHook({
  passData,
  dialogOpts
});

const { dialogSubmitHandle } = ModalHook({
  dialogOpts,
  callBack: () => init(passData.value.id)
});

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init(passData.value.id);
    }
  }
);

init(passData.value.id);
</script>
<style lang="stylus" scoped>
.out-warehouse-receipt-details {
  .title{
      font-weight: 600;
      font-size: 14px;
      padding: 12px;
  }
  .base-info{
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .emphasis-item {
        color: #fe8100;
        > :deep(.ant-form-item-label){
          >label{
            color: #fe8100;
          }
        }
      }
      :deep(.ant-form-item){
        margin-bottom: 8px;
      }
  }
  .box-info{
      margin-top: 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .title{
          display: flex;
          flex-direction:column;
          .title-Inner-div{
            display:flex;
            justify-content:space-between;
            align-items:center
          }
      }
      .table-content{
        padding: 0 12px 12px 12px;
      }
  }


  .driver-info{
    margin-top: 12px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px #ccc;
    font-weight: 600;
    .title{
        display: flex;
        flex-direction:column;
        .title-Inner-div{
          display:flex;
          justify-content:space-between;
          align-items:center
        }
    }
    .table-content{
      padding: 0 12px 12px 12px;
    }
}

  .track-info-wrapper{
      margin-top: 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
  }
  .file-list{
    margin-top: 12px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px 0px #ccc;
    font-weight: 600;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .table-content{
      padding: 0 12px 12px 12px;
    }
  }
}
</style>
